<template>
    <div class="admin-page">
        <div class="page-header">
            <div style="display: flex;justify-content: space-between">
                <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-bottom: 15px;">
                    <div style="display: flex; align-items: center; ">
                        <span>用户ID:</span>
                        <el-input v-model="form.search" size="small" style="margin-left: 10px; width: 150px;" placeholder="请输入用户ID"></el-input>
                    </div>
                    <div style="display: flex; align-items: center; ">
                        <span>审核状态:</span>
                        <el-select v-model="form.state" size="small" style="margin-left: 10px; flex: 1;width: 150px;">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="未审核" value="0"></el-option>
                            <el-option label="已审核" value="1"></el-option>
                            <el-option label="已拒绝" value="2"></el-option>
                        </el-select>
                    </div>
                    <div style="display: flex; align-items: center; ">
                        <span>类型:</span>
                        <el-select v-model="form.type" size="small" style="margin-left: 10px; flex: 1;width: 150px;">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="银行卡" value="1"></el-option>
                            <el-option label="支付宝" value="2"></el-option>
                        </el-select>
                    </div>

                </div>
                <div style="display: flex; gap: 15px; align-items: center">
                   <el-button type="primary" size="small" @click="toSearch">搜索</el-button>
                   <el-button type="success" size="small" @click="reset">重置</el-button>
                    <el-button size="small" @click="exportToExcel">导出</el-button>
               </div>
            </div>
            <el-table height="560" :data="adminList" border style="width: 100%;overflow-y: auto"
                      :header-cell-style="{background:'#FAFAFA',color:'#666', fontSize:'13px'}" size="small">
                <el-table-column prop="id" label="ID" align="center" width="80"/>
                <el-table-column prop="uid" label="用户ID" align="center" width="80"/>
                <el-table-column prop="name" align="center" label="申请人名称" width="100"/>
                <el-table-column prop="username" align="center" label="用户名" width="100"/>
                <el-table-column prop="open_bank" align="center" label="银行名称" width="150"/>
                <el-table-column prop="bank_card" align="center" label="银行卡号" width="160"/>
                <el-table-column prop="money" align="center" label="申请提现金额" width="110"/>
                <el-table-column prop="actual_money" align="center" label="打款金额" width="110"/>
                <el-table-column prop="type" align="center" label="提现类型" width="110">
                    <template slot-scope="scope">
                      <span :style="{ color: getColor(scope.row.type) }">
                        {{ getTypeName(scope.row.type) }}
                      </span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="remark" label="审核备注"/>
                <el-table-column prop="create_time" align="center" label="申请时间" width="135"/>
                <el-table-column prop="exam_time" align="center" label="审核时间" width="135">
                    <template slot-scope="scope">
                        {{ scope.row.exam_time === 0 ? "-" : scope.row.exam_time }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="state" label="审核状态" width="80">
                    <template #default="scope">
                        <span :style="{ color: getStatusColor(scope.row.state) }">
                            {{ scope.row.state === 0 ? '未审核' : scope.row.state === 1 ? '已审核' : scope.row.state === 2 ? '已拒绝' : '未知状态' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="handleEdit(scope.row)" icon="el-icon-edit">查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="total"
            />
            <!-- 编辑商品对话框 -->
            <el-dialog title="查看审核" :visible.sync="editDialogVisible" width="700px" :close-on-click-modal="false">
                <el-form :model="adminForm" :rules="adminRules" ref="adminForm" label-width="100px" size="small">
                    <el-form-item label="昵称" prop="name">
                        <el-input style="width: 90%;" v-model="adminForm.name" disabled/>
                    </el-form-item>
                    <el-form-item label="用户名" prop="name">
                        <el-input style="width: 90%;" v-model="adminForm.username" disabled/>
                    </el-form-item>
                    <el-form-item label="申请金额" prop="money">
                        <el-input style="width: 90%;" v-model="adminForm.money" disabled/>
                    </el-form-item>
                    <el-form-item label="是否通过">
                        <el-radio-group v-model="adminForm.state">
                            <el-radio :label="0">未审核</el-radio>
                            <el-radio :label="1">已审核</el-radio>
                            <el-radio :label="2">未通过</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="审核备注" prop="remark">
                        <el-input type="textarea" style="width: 90%;" v-model="adminForm.remark"/>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false" size="small">取消</el-button>
                    <el-button type="primary" @click="submitForm" size="small">确定</el-button>
                </div>
            </el-dialog>
            <!-- 申请凭证大弹窗 -->
            <el-dialog title="申请凭证" :visible.sync="qrCodeDialogVisible" width="300px" :close-on-click-modal="true">
                <div style="text-align: center;">
                    <img :src="currentQRCode" style="max-width: 100%; max-height: 800px;">
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex";

export default {
    data() {
        return {
            adminList: [],
            currentPage: 1,
            pageSize: 15,
            searchParams:{},
            total: 25,
            form: {
                search: "",
                state: "0",
                type: "",
            },
            addDialogVisible: false,
            editDialogVisible: false,
            adminForm: {
                name: '',
                username: '',
                state: 1,
                money: '',
                remark: ''
            },
            adminRules: {
                money: [{required: true, message: '请输入申请金额', trigger: 'blur'}],
                remark: [{required: true, message: '请输入申请备注', trigger: 'blur'}],

            },
            statusList: [
                {
                    id: 1,
                    name: "显示"
                },
                {
                    id: 0,
                    name: '隐藏'
                }
            ],
            imageUrl: '',
            imageUrl1: '',
            qrCodeDialogVisible: false,
            currentQRCode: '',
        };
    },
    mounted() {
        this.fetchAdminList();
    },
    computed: {
        ...mapState(["userInfo"]),
    },

    methods: {

        exportToExcel() {
            // 从本地存储中获取 userInfo
            const userInfo = JSON.parse(localStorage.getItem('userInfo'));
            if (!userInfo || !userInfo.token) {
                // 如果 token 不存在，给出提示
                this.$message.error('token 不存在，请重新登录');
                return;
            }
            const token = userInfo.token;
            // 拼接搜索条件参数
            let queryParams = `token=${token}`;
            const {search, type,  state} = this.form;
            if (search) {
                queryParams += `&search=${encodeURIComponent(search)}`;
            }
            if (type) {
                queryParams += `&type=${type}`;
            }
            if (state !== undefined && state !== null && state !== '') {
                queryParams += `&state=${state}`;
            }

            // 构造完整的 URL
            const url = this.$appConfig.baseUrl + `admin/UserMoneyWith/userMoneyWithExport?${queryParams}`;
            // 在新窗口中打开页面
            window.open(url, '_blank');
        },
        getColor(type) {
            if (type === 1) {
                return 'green';
            } else if (type === 2) {
                return '#1c94d4';
            }
            return '';
        },
        getTypeName(type) {
            if (type === 1) {
                return '银行卡';
            } else if (type === 2) {
                return '支付宝';
            }
            return '';
        },
        getStatusColor(state) {
            // 0和2都返回红色，1返回绿色
            if (state === 0 || state === 2) {
                return 'red';
            } else if (state === 1) {
                return 'green';
            }
            return ''; // 其他状态返回默认颜色
        },
        openCertificateDialog(thumb) {
            this.currentQRCode = this.$appConfig.imgPath + thumb;
            this.qrCodeDialogVisible = true;
        },
        fetchAdminList(params = {}) {
            const defaultParams = {
                page: this.currentPage,
                ...(this.form.state ? { state: this.form.state } : {}),
                ...params
            };
            this.$message.info({
                message: '正在加载数据...',
                duration: 0,
                showClose: true,
                iconClass: 'el-icon-loading'
            });
            this.$http.get('/admin/UserMoneyWith/lists', {params: defaultParams}).then(result => {
                if (result.code === 200) {
                    this.adminList = result.data.data || [];
                    this.total = parseInt(result.data.total) || 0;
                } else {
                    this.$message.error(result.msg);
                }
            }).catch(error => {
                console.error('获取列表失败:', error);
                this.$message.error('获取列表数据失败，请重试');
            }).finally(() => {
                this.$message.closeAll();
            });
        },
        handleSizeChange(val) {
            this.pageSize = 15;
            this.fetchAdminList();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.fetchAdminList(this.searchParams);
        },
        handleEdit(row) {
            // 调用接口获取详细数据
            this.$http.get(`/admin/single/edit`, {params: {id: row.id}}).then(result => {
                if (result.code == 200) {
                    this.adminForm.name = row.name;
                    this.adminForm.username = row.username;
                    this.adminForm.state = row.state;
                    this.adminForm.money = row.money;
                    this.adminForm.remark = row.remark;
                    // 新增：假设行数据中有 id 字段，将其存储到 adminForm 中，以便后续传递给后端接口
                    this.adminForm.id = row.id;
                    this.editDialogVisible = true;
                    // 等待 DOM 更新后设置表单验证状态
                    this.$nextTick(() => {
                        this.$refs.adminForm && this.$refs.adminForm.clearValidate();
                    });
                } else {
                    this.$message.error(result.msg || '获取详情失败');
                }
            }).catch(error => {
                console.error('获取详情失败:', error);
                this.$message.error('获取详情失败');
            });
        },
        toSearch() {
            this.searchParams = {
                ...this.form,
                userId: this.form.userId || undefined
            };
            this.currentPage = 1;
            this.fetchAdminList(this.searchParams);
        },
        reset() {
            this.form = {
                search: "",
                state: "0",
                userId: "",
            };
            this.currentPage = 1;
            this.fetchAdminList();
        },
        submitForm() {
            this.$refs.adminForm.validate(valid => {
                if (valid) {
                    this.$http.post('/admin/UserMoneyWith/emReflectThe', this.adminForm).then(result => {
                        if (result.code === 200) {
                            this.$message.success(result.msg);
                            this.addDialogVisible = false;
                            this.editDialogVisible = false;
                            this.fetchAdminList();
                        } else {
                            this.$message.error(result.msg);
                        }
                    });
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

/deep/ .el-dialog__header {
    padding: 10px !important;
    text-align: center;
}

.admin-page {
    padding: 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);

    .page-header {
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #f0f2f5;

        .header-title {
            font-size: 20px;
            font-weight: 600;
            color: #1f2937;
            line-height: 1.4;
        }
    }

    .table-header {
        margin-bottom: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .table-title {
            font-size: 16px;
            font-weight: 500;
            color: #374151;
        }

        .table-actions {
            .el-button {
                margin-left: 12px;
                transition: all 0.3s;

                &:hover {
                    transform: translateY(-1px);
                }
            }
        }
    }

    .el-tabs {
        margin-top: 16px;

        :deep(.el-tabs__header) {
            margin-bottom: 28px;
            border-bottom: 2px solid #f0f2f5;
        }

        :deep(.el-tabs__item) {
            font-size: 15px;
            padding: 0 28px;
            height: 44px;
            line-height: 44px;
            transition: all 0.3s;

            &.is-active {
                color: #2563eb;
                font-weight: 500;
            }

            &:hover {
                color: #2563eb;
            }
        }

        :deep(.el-tabs__active-bar) {
            height: 2px;
            background-color: #2563eb;
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
    }

    .el-table {
        margin-top: 12px;
        border-radius: 8px;
        overflow: hidden;

        :deep(th) {
            background-color: #f9fafb !important;
            font-weight: 500;
            color: #4b5563;
        }

        :deep(td) {
            padding: 12px 0;
        }

        .delete-btn {
            color: #dc2626;
            transition: all 0.3s;

            &:hover {
                color: #ef4444;
            }
        }
    }

    .el-pagination {
        margin-top: 24px;
        padding: 12px 0;
        text-align: right;

        :deep(.el-pagination__total) {
            margin-right: 12px;
        }

        :deep(.btn-prev),
        :deep(.btn-next) {
            border-radius: 4px;
            background-color: #fff;
        }

        :deep(.el-pager li) {
            border-radius: 4px;
            background-color: #fff;

            &.active {
                background-color: #2563eb;
            }
        }
    }

    .el-dialog {
        border-radius: 12px;
        overflow: hidden;
        max-height: 90vh;
        display: flex;
        flex-direction: column;

        :deep(.el-dialog__header) {
            padding: 20px 24px !important;
            border-bottom: 1px solid #f0f2f5;
            margin: 0;

            .el-dialog__title {
                font-size: 18px;
                font-weight: 600;
                color: #1f2937;
            }
        }

        :deep(.el-dialog__body) {
            padding: 32px 24px;
            flex: 1;
            overflow-y: auto;

            .el-form-item {
                .el-input,
                .el-select {
                    width: 320px;
                }
            }
        }

        :deep(.el-tree) {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            padding: 10px;
        }

        :deep(.el-dialog__footer) {
            padding: 16px 24px;
            border-top: 1px solid #f0f2f5;
        }

        :deep(.el-form-item__label) {
            font-weight: 500;
            color: #374151;
        }

        :deep(.el-button) {
            padding: 8px 20px;
            transition: all 0.3s;

            &:hover {
                transform: translateY(-1px);
            }
        }
    }
}

.tip-text {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    display: block;
}

/deep/ .el-tab-pane {
    height: 650px;
    overflow-y: auto;
}

</style>


<el-dialog title="二维码" :visible.sync="qrCodeDialogVisible" width="300px" :close-on-click-modal="false">
<div style="text-align: center;">
    <qrcode-vue :value="currentQRCode" :size="200" level="H"/>
</div>
</el-dialog>
}



